import {PageContainer} from '@ant-design/pro-layout';
import ProForm, {ProFormSelect, ProFormText, ProFormUploadDragger} from '@ant-design/pro-form';
import ProCard from '@ant-design/pro-card';
import {Button, FormInstance, message} from 'antd';
import utils from '@/utils';
import styles from './index.less';
import React from 'react';
import {UploadRequestOption as RcCustomRequestOptions} from 'rc-upload/lib/interface';
import {RcFile} from 'antd/es/upload';
import ProFormItem from '@ant-design/pro-form/es/components/FormItem';

const update = (data: any) => {
   return utils.request.post('/chromosome', data);
};

export default function Update() {

   const formRef = React.useRef<FormInstance>();


   return <PageContainer title='上传异常图片'
                         className={styles.layout}
                         extra={[
                            <Button onClick={() => {
                               formRef.current?.resetFields();
                            }}>重置</Button>,
                            <Button type='primary' onClick={async () => {
                               const loading = message.loading('上传中...');
                               const formData = await formRef.current?.validateFields();
                               formData.path = await new Promise(resolve => {
                                  const reader = new FileReader();
                                  reader.readAsDataURL(formData.path[0].originFileObj);
                                  reader.onload = () => resolve(reader.result as string);
                               });
                               await update(formData);
                               loading();
                               message.success('保存成功', 0.8);
                            }}>提交</Button>]}>
      <ProCard>
         <div className={styles.dataForm}>
            <ProForm layout='horizontal'
                     submitter={false}
                     labelAlign='right'
                     formRef={formRef}
                     validateMessages={{required: '必填项'}}
            >
               <ProFormSelect
                  width='lg'
                  name='type'
                  rules={[{required: true}]}
                  options={[
                     {value: '缺失', label: '缺失'},
                     {value: '嵌合缺失', label: '嵌合缺失'},
                     {value: '重复', label: '重复'},
                     {value: '嵌合重复', label: '嵌合重复'}
                  ]}
                  label='异常类型'
               />
               <ProFormItem shouldUpdate noStyle>
                  {(form) => {
                     return form.getFieldValue('type')?.includes('嵌合') &&
                        <ProFormText rules={[{required: true}]}
                                     width='lg'
                                     fieldProps={{addonAfter: '%', type: 'number'}}
                                     label='嵌合比例' name='chimericProportion' />;
                  }}
               </ProFormItem>


               <ProFormSelect name='number' width='lg'
                              rules={[{required: true}]}
                              label='染色体号'
                              options={[
                                 {value: '23', label: 'X'},
                                 {value: '24', label: 'Y'},
                                 ...new Array(22).fill(0).map((_, index) => {
                                    const value = String(index + 1);
                                    return {
                                       value: value,
                                       label: value
                                    };
                                 })
                              ]} />

               <ProFormText
                  width='lg'
                  rules={[{required: true}]}
                  name='zone'
                  fieldProps={{
                     addonBefore: <ProFormSelect name='zonePrefix'
                                                 noStyle
                                                 options={[
                                                    {
                                                       label: 'p带',
                                                       value: 'p'
                                                    },
                                                    {
                                                       label: 'q带',
                                                       value: 'q'
                                                    }
                                                 ]}
                                                 initialValue='p' />
                  }}
                  label='区带位置'
               />
               <ProFormText name='callRate' width='lg'
                            rules={[{required: true}]}
                            label={<span>可&nbsp;&nbsp;靠&nbsp;&nbsp;性</span>}
                            fieldProps={{addonAfter: '%', type: 'number'}} />


               <ProFormUploadDragger
                  width={520}
                  label='选择图片'
                  name='path'
                  action='#'
                  rules={[{required: true}]}
                  fieldProps={{
                     customRequest: (option: RcCustomRequestOptions) => {
                        const request = new XMLHttpRequest();
                        option.file && option?.onSuccess && option?.onSuccess(option?.file, request);
                     },
                     listType: 'picture',
                     maxCount: 1,
                     multiple: false,
                     onPreview: async (file) => {
                        const src: string = await new Promise(resolve => {
                           const reader = new FileReader();
                           reader.readAsDataURL(file.originFileObj as RcFile);
                           reader.onload = () => resolve(reader.result as string);
                        });
                        const image = new Image();
                        image.src = src;
                        const imgWindow = window.open();
                        imgWindow?.document.body.append(image);
                     }
                  }}
               >
               </ProFormUploadDragger>
            </ProForm>
         </div>
      </ProCard>
   </PageContainer>;
}
